<template>
  <div>
    <!-- 登录页面 -->
    <div class="box">
      <div class="doLogin">
        <van-form>
          <div>
            <!-- 登录方式切换 -->
            <van-tabs v-model="loginMethod" animated>
              <!-- 账号登录 -->
              <van-tab title="账号登录" name="userlogin">
                <div
                  style="font-size: 12px; color: #777; margin: 1rem 0 0 1rem"
                >
                  <p>如果未设置过密码,请点击忘记密码</p>
                </div>
                <div>
                  <van-field
                    v-model="form.uname"
                    label-width="40"
                    center
                    clearable
                    label="账号"
                    placeholder="请输入账号"
                    @input="errMsg.uname = ''"
                  >
                    <template #button>
                      <van-button
                        size="small"
                        round
                        :hairline="true"
                        style="color: #777"
                        @click="toLossPwd"
                        native-type="button"
                        >忘记密码</van-button
                      >
                    </template>
                  </van-field>
                  <div
                    style="
                      font-size: 12px;
                      color: red;
                      margin-left: 68px;
                      height: 1rem;
                    "
                  >
                    <p style="margin: 0">{{ errMsg.uname }}</p>
                  </div>
                  <van-field
                    v-model="form.upwd"
                    label-width="40"
                    center
                    clearable
                    label="密码"
                    type="password"
                    placeholder="请输入密码"
                    @input="errMsg.upwd = ''"
                  >
                    <template #button>
                      <van-button size="small" round @click="toReg"
                        >&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;</van-button
                      >
                    </template>
                  </van-field>
                  <div
                    style="
                      font-size: 12px;
                      color: red;
                      margin-left: 68px;
                      height: 1rem;
                    "
                  >
                    <p style="margin: 0">{{ errMsg.upwd }}</p>
                  </div>
                </div>
                <!-- 登录按钮 -->
                <div class="doReg">
                  <van-button
                    type="danger"
                    plain
                    hairline
                    round
                    size="large"
                    color="#fff"
                    @click="userLogin"
                    :disabled="!isChecked"
                    >&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;</van-button
                  >
                </div>
              </van-tab>
              <van-tab title="短信登录" name="smslogin">
                <div
                  style="font-size: 12px; color: #777; margin: 1rem 0 0 1rem"
                >
                  <p>未注册手机号请先点击下方的立即注册按钮</p>
                </div>
                <div>
                  <van-field
                    v-model="form.phone"
                    label-width="60"
                    center
                    clearable
                    label="手机号"
                    placeholder="请输入手机号码"
                    @input="errMsg.phone = ''"
                  >
                    <template #button>
                      <van-button
                        v-show="cutdown == false"
                        size="small"
                        round
                        :hairline="true"
                        style="color: #777"
                        native-type="button"
                        @click="getTelCode"
                        >获取验证码</van-button
                      >
                      <!-- 倒计时 -->
                      <div
                        v-show="cutdown == true"
                        style="
                          width: 3.9375rem;
                          height: 2rem;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        "
                      >
                        <van-count-down
                          :time="time"
                          format="sss"
                          @finish="timeOut"
                        />
                      </div>
                    </template>
                  </van-field>
                  <div
                    style="
                      font-size: 12px;
                      color: red;
                      margin-left: 88px;
                      height: 1rem;
                    "
                  >
                    <p style="margin: 0">{{ errMsg.phone }}</p>
                  </div>
                  <van-field
                    v-model="form.telCode"
                    label-width="60"
                    center
                    clearable
                    label="验证码"
                    placeholder="请填入验证码"
                    @input="errMsg.telCode = ''"
                  >
                    <template #button>
                      <van-button size="small" round @click="toReg"
                        >&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;</van-button
                      >
                    </template>
                  </van-field>
                  <div
                    style="
                      font-size: 12px;
                      color: red;
                      margin-left: 88px;
                      height: 1rem;
                    "
                  >
                    <p style="margin: 0">{{ errMsg.telCode }}</p>
                  </div>
                </div>
                <!-- 登录按钮 -->
                <div class="doReg">
                  <van-button
                    type="danger"
                    plain
                    hairline
                    round
                    size="large"
                    color="#fff"
                    @click="codeLogin"
                    :disabled="!isChecked"
                    >&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;</van-button
                  >
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-form>

        <!-- 微信登录 -->
        <div class="doReg" style="position: relative; bottom: 10px">
          <img src="" alt="" />
        </div>
        <div class="doReg userText">
          <label style="font-size: 14px"
            ><input
              type="checkbox"
              name=""
              id=""
              :checked="isChecked"
              @click="docheck"
              style="vertical-align: middle"
            />我已阅读并遵守 <a href="javascript:;">《用户协议》</a> 与
            <a href="javascript:;">《隐私协议》</a></label
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Identify from "./js/Identify"
import { mapState, mapMutations } from "vuex"
export default {
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      // 条款是否勾选
      isChecked: true,
      // 倒计时
      cutdown: false,
      time: 0,
      // 默认登录方式
      loginMethod: "userlogin",
      // 表单对象数据
      form: {
        uname: "",
        upwd: "",
        // 验证码
        telCode: "",
        phone: "",
      },
      // 校验信息
      errMsg: {
        uname: "",
        upwd: "",
        // 验证码
        telCode: "",
        phone: "",
      },
    }
  },
  methods: {
    // 全局
    ...mapMutations([
      "getUserInfo", //also supports payload `this.nameOfMutation(amount)`
    ]),
    // 条款勾选状态变化
    docheck() {
      this.isChecked = !this.isChecked
      // console.log(this.isChecked);
    },
    toReg() {
      this.$eventBus.$emit("toReg", { msg: "前往注册页面" })
    },
    toLossPwd() {
      this.$eventBus.$emit("lossPwd", { msg: "前往忘记密码页面" })
    },
    // 账号密码登录
    userLogin() {
      this.errMsg.uname = Identify.checkUser(this.form.uname)
      this.errMsg.upwd = Identify.checkPwd(this.form.upwd)
      if (this.errMsg.uname == "" && this.errMsg.upwd == "") {
        let url = "/v1/login/"
        let params = { uname: this.form.uname, upwd: this.form.upwd }
        this.$post(url, params).then(res => {
          if (res.data.code == 1) {
            let user_icon = res.data.data.user[0].user_icon
            // 发送登录状态
            this.$eventBus.$emit("loginstatus", {
              uname: this.form.uname,
              user_icon,
              user_role: res.data.data.user[0].user_role,
            })
            this.$store.commit("getUserInfo", res.data.data.user[0])
            // console.log(res.data.token);
            // 存储token到本地
            localStorage.setItem("token", res.data.token)
            // console.log(this.user);
          } else {
            this.errMsg.uname = res.data.msg
          }
        })
      }
    },
    // 获取验证码
    getTelCode() {
      this.errMsg.phone = Identify.checkPhone(this.form.phone)
      if (this.errMsg.phone == "") {
        let url = "/v1/login/mobile"
        let params = { phone: this.form.phone }
        this.$get(url, params).then(res => {
          if (res.data.code == 1) {
            this.showCutdown()
          } else {
            this.errMsg.phone = res.data.msg
          }
        })
      }
    },
    // 验证码登录
    codeLogin() {
      this.errMsg.phone = Identify.checkPhone(this.form.phone)
      this.errMsg.telCode = Identify.checkTelCode(this.form.telCode)
      if (this.errMsg.phone == "" && this.errMsg.telCode == "") {
        let url = "/v1/login/codeLogin"
        let params = { phone: this.form.phone, telCode: this.form.telCode }
        this.$post(url, params).then(res => {
          if (res.data.code == 1) {
            this.$eventBus.$emit("loginstatus", {
              uname: res.data.data[0].uname,
              user_icon: res.data.data[0].user_icon,
              user_role: res.data.data[0].user_role,
            })
            // console.log(res.data);
            this.$store.commit("getUserInfo", res.data.data[0])
            // console.log(res.data.token);
            // 存储token到本地
            localStorage.setItem("token", res.data.token)
            // console.log(this.user);
          } else {
            this.errMsg.telCode = res.data.msg
            // console.log(res.data.data);
          }
        })
      }
    },
    // 倒计时结束
    timeOut() {
      this.cutdown = false
      this.time = 0
    },
    // 显示倒计时
    showCutdown() {
      this.cutdown = true
      this.time = 60 * 1000
    },
  },
}
</script>

<style lang="scss" scoped>
.van-button--plain {
  background-color: #ee0a24;
}

</style>
<style lang="css" scoped src="../../assets/css/login.css"></style>
